<template>
  <view class="mpjumpapp">
    <view class="mpjumpapp_bg"><image :src="BaseImgUrl + '/home/haibao.png'" mode="widthFix" style="width: 100%"></image></view>
    <view class="mpjumpapp_btn">
      <view style="height: 30rpx;"></view>
      <!--#ifdef MP-->
      <view class="mpjumpapp_btn1">已安装，手动打开领食APP上传截图</view>
      <view class="mpjumpapp_btn2" @tap="toMPCopy">还没安装？复制链接</view>
      <!--#endif-->
      <!--#ifdef H5-->
      <view class="mpjumpapp_btn1" @tap="toOpenAppPage">打开领食APP上传截图</view>
      <view class="mpjumpapp_btn2" @tap="toDownloadApp">还没安装？立即下载</view>
      <!--#endif-->
      <view style="height: 30rpx;"></view>
    </view>
    <!--微信浏览器提示到浏览器-->
    <view v-if="isShowShare" class="share_box_shadow">
      <image mode="widthFix" :src="BaseImgUrl + '/images/share_guide.png'" style="width: 90%;margin: 0 auto;"></image>
    </view>
    <u-popup :show="isShowCopy" mode="center" round="20" :customStyle="{width: '65%',height: '300rpx'}">
      <view class="mpjumpapp_popup">
        <view class="mpjumpapp_popup_title">复制成功</view>
        <u-line color="#f3f3f3"></u-line>
        <view class="mpjumpapp_popup_text">用手机浏览器打开，下载APP</view>
        <view class="mpjumpapp_popup_btn" @tap="isShowCopy = false">知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {BaseImgUrl} from "../../utils/lshttp";
import { updateConfigAPI } from "../../services/me"
import {onShow} from "@dcloudio/uni-app";


onShow( () => {
  getApkUrl()
})
const isShowShare = ref(false)
// 是否显示复制链接弹窗
const isShowCopy = ref(false)
// 复制链接事件
const toMPCopy = () => {
  // 隐藏复制链接弹窗
  isShowCopy.value = true
  // 复制下载APP链接
  let url = "https://lsz.lszbg.com/jumpapp/index.html#/"
  // 复制链接到剪贴板
  uni.setClipboardData({
    data: url,
    success() {
      uni.showToast({
        title: "复制成功",
        icon: 'none',
        duration: 1000
      })
    }
  })
}

// 打开APP
const toOpenAppPage = () => {
  // 判断是否是微信浏览器
  let u = navigator.userAgent;
  let isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
  if (isWeixin) {
    isShowShare.value = true;
    return false;
  }
  const platform = uni.getSystemInfoSync().platform;
  if (platform == "android"){
    android()
  }
  if (platform == "ios"){
    ios()
  }
}
// 打开android端
const android = () => {
  uni.showLoading({
    title: '加载中...'
  });
  const currentTime = new Date().getTime();
  window.location.href = "lingshi://"; //你的 UrlSchemes
  // 启动间隔20ms运行的定时器，并检测累计消耗时间是否超过2000ms,超时则结束
  let _count = 0, timer;
  timer = setInterval(() => {
    _count++;
    const endTime = new Date().getTime() - currentTime;
    if (_count >= 200 || endTime > 5000) {
      uni.hideLoading()
      clearInterval(timer);
    }
  }, 20)
}
// 打开IOS端
const ios = () => {
  uni.showLoading({
    title: '加载中...'
  });
  // 获取当前时间
  const currentTime = new Date().getTime();
  window.location.href = "lingshi"; //你的 UrlSchemes
  // 启动间隔20ms运行的定时器，并检测累计消耗时间是否超过2000ms,超时则结束
  let _count = 0, timer;
  timer = setInterval(() => {
    _count++;
    const endTime = new Date().getTime() - currentTime;
    if (_count >= 200 || endTime > 5000) {
      uni.hideLoading()
      clearInterval(timer);
    }
  })
}
// 获取下载apk链接
const apkUrl = ref('')
const getApkUrl = async () => {
  let res = await updateConfigAPI()
  apkUrl.value = res.result.android_version_config.url
}
// 下载APP
const toDownloadApp = () => {
  // 判断是否是微信浏览器
  let u = navigator.userAgent;
  let isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
  if (isWeixin) {
    isShowShare.value = true;
    return false;
  }
  window.location.href = apkUrl.value;
}
</script>


<style scoped lang="scss">
.mpjumpapp{
  width: 100%;

}
.mpjumpapp_btn{
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: #FFFFFF;
  box-shadow: 0px -1px 10px 0px rgba(0,0,0,0.1);
}
.mpjumpapp_btn1{
  background: linear-gradient(90deg, #56a2ff, #4ccaff);
  color: #fff;
  border-radius: 100px;
  width: 80%;
  margin: 0 auto 30rpx;
  padding: 15px 0;
  font-size: 15px;
}
.mpjumpapp_btn2{
  background: linear-gradient(90deg, #fff, #fff);
  color: #56a2ff;
  border: 1px solid #56a2ff;
  border-radius: 100px;
  width: 80%;
  margin: 0 auto;
  padding: 15px 0;
  font-size: 15px;
}
/* 复制成功弹窗css */
.mpjumpapp_popup{
  padding: 20rpx;
  .mpjumpapp_popup_title{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    text-align: center;
    color: #333;
  }
  .mpjumpapp_popup_text{
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666666;
    padding: 30rpx 0;
    text-align: center;
  }
  .mpjumpapp_popup_btn{
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin: 0 auto;
    color: #FFFFFF;
    background: linear-gradient(90deg, #56a2ff, #4ccaff);
    border-radius: 30rpx;
  }
}
/* 微信H5分享提示图片css */
.share_box_shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
}

</style>
